<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('运行规程文档解析')" />
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
         <form enctype="multipart/form-data" id="fileForm">
             <div class="btn-group-sm" id="toolbar" role="group">
                 <div class="fileinput fileinput-new" id="attachmentInputs1" data-provides="fileinput">
                     <span class="btn btn-white btn-file">
                         <span class="fileinput-new">上传文件</span>
                         <input type="file" id="file1" multiple="multiple" onchange="findFile()" name="fileName">
                     </span>
                 </div>
<!--                 实现进度条显示-->
                     <div class="container" id="jdt" style="float: right" >
                         <div class="row">
                             <div class="col-md-offset-3 col-md-6" style="margin-top: 8px; height: 23px">
                                 <div class="progress">
                                     <div class="progress-bar progress-bar-info progress-bar-striped active" id="mt-progress-length"
                                          style="width: 0%;">
                                         <div class="progress-value" id="mt-progress-value">0%</div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
             </div>

         </form>
         <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>

         <!-- 实现 -->
     </div>
    <th:block th:include="include :: footer" />
<script th:inline="javascript">

    var fenGe = "%FGF%";
    var httpUrl = [[${httpUrl}]];
    // var httpUrl = "http://10.168.1.144:8080";
    var editFlag = [[${@permission.hasPermi('dxfcomponent:cad:edit')}]];
    var removeFlag = [[${@permission.hasPermi('dxfcomponent:cad:remove')}]];
    var prefix = ctx + "docContentPargraph/paragraphandtitle";
    var win = '';
        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                searchUrl: prefix + "/search/{id}",
                removeUrl: prefix + "/remove",
                modalName: "图纸索引信息",
                pagination: false,
                onLoadSuccess: function() {
                    $.modal.closeLoading();
                },
                columns: [
                    // {
                    // checkbox: true
                    // },
                    {
                        title: "序号",
                        formatter: function (value, row, index) {
                            return $.table.serialNumber(index);
                        }
                    },
                    {
                        field : 'id',
                        title : '文件id',
                        visible: false
                    },
                    {
                        field : 'fileCode',
                        title : '文件编码'
                    },
                    {
                        field : 'fileName',
                        title : '文件名称'
                    },
                    {
                        field : 'fileVersion',
                        title : '版本'
                    },
                    {
                        field : 'edition',
                        title : '版次'
                    },
                    {
                        field : 'fileType',
                        title : '类型'
                    },
                    {
                        field : 'remark',
                        title : '状态',
                        formatter: function(value, row, index){
                            if (value==null || value=='') return '成功';
                            let split = value.split(fenGe);
                            if (split[0]=='异常') return "<span style='background-color: yellow'>"+ handleFg(value) + "</span>";
                            if (split[0]=='失败') return "<span style='background-color: red'>"+ handleFg(value) + "</span>";
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            // actions.push('<a class="btn btn-success btn-xs' + searchFlag + '" href="javascript:void(0)" onclick="searchDraw(\'' + row.fileId + '\' , \''+ row.status + '\')"><i class="fa fa-edit"></i>查看数据</a> ');
                            // actions.push('&nbsp;&nbsp;<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="edit(\'' + row.fileId + '\')"><i class="fa fa-edit"></i>查看J</a> ');
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href='+ httpUrl +'/?id='+row.id+ ' target="_blank"><i class="fa fa-edit"></i>查看</a> ');
                            // actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href='+ httpUrl +'/id/'+row.id+ ' target="_blank"><i class="fa fa-edit"></i>查看</a> ');
                            actions.push('&nbsp;<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');

                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
        });
        // 实现主页面窗口刷新
        function successCallback() {
            if(win!=''){
                win.close();
            }
            $.table.refresh();
        }
        var totalSize = 0;
        $(":file").change(function () {
          //  $("#jdt").show();
            var file = this.files[0];
            var name = file.name;
            var size = file.size;
            var type = file.type;

            url = window.URL.createObjectURL(file);

            totalSize += size;

            $(".show_info").html("文件名：" + name + "<br>文件类型：" + type + "<br>文件大小：" + size + "<br>url: " + url);

            // 恢复进度条的状态
            //背景成绿色
            $(".progress").css("background", "#262626");
            //归零 隐藏
            $("#mt-progress-length").css({"width": "0%", "opacity": "1"});
            $("#mt-progress-value").html(0);

        })

        function handleFg(data) {

            while (data.indexOf(fenGe)!=-1) {
                data = data.replace(fenGe, "");
            }

            return data;
        }
        /***
         * 实现文件上传
         */
        function findFile(){

            //背景恢复
            $(".progress").css("background", "#262626");
            //归零 隐藏
            $("#mt-progress-length").css({"width": "0%", "opacity": "1"});
            $("#mt-progress-value").html(0);

            var doc = document.getElementById('file1');
            if (doc.files.length>10){
                alert("最多上传10份文件！");
                return false;
            }
            for(var i=0;i<doc.files.length;i++){
                var name = doc.files[i].name;
                var hz = name.substring(name.lastIndexOf(".")+1);
                if(hz!="doc" && hz!="docx"){
                   // alert("该功能暂未实现，请手动转为.dxf文件上传！");
                    alert("该文件格式暂不支持，请上传doc或docx文件！");
                    return false;
                }
            }
            var formData = new FormData();
            //注入 name=file
            var files = $("#attachmentInputs1 input[type='file']");

            for (var i = 0; i < files[0].files.length; i++) {
                formData.append("fileName", files[0].files[i]);
            }
            $.modal.loading("正在解析中，请稍后...");
            //执行上传
            $.ajax({
                url:  prefix + '/add',
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                xhr: function () {
                    //获取ajax中的ajaxSettings的xhr对象  为他的upload属性绑定progress事件的处理函数
                    var myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        //检查其属性upload是否存在
                        myXhr.upload.addEventListener("progress", resultProgress, false);
                    }
                    return myXhr;
                },
                success: function (result) {
                    console.log(result);
                    if (result.code == web_status.SUCCESS) {
                        $.modal.alertSuccess('解析成功');
                        $.modal.closeLoading();
                        successCallback();
                    } else if (result.code == web_status.WARNING) {
                        $.modal.alertWarning(result.msg)
                    } else {
                        $.modal.alertError(result.msg);
                        $.modal.closeLoading();
                    }
                },
                error:function (xhr,text) {
                    if(text === 'timeout'){
                        xhr.abort();
                    }
                }
            });
        }

        // 上传进度回调函数
        function resultProgress(e) {
            if (e.lengthComputable) {
                var percent = e.loaded / e.total * 100;
                $(".show_result").html(percent + "%");
                var percentStr = String(percent);
                if (percentStr == "100") {
                    percentStr = "100.0";
                }
                percentStr = percentStr.substring(0, percentStr.indexOf("."));
                $("#mt-progress-value").html(percentStr);
                $("#mt-progress-length").css("width", percentStr + "%");

                if (percentStr == "100") {
                    setTimeout(function () {
                        //背景成绿色
                        $(".progress").css("background", "#15AD66");
                        //归零 隐藏
                        $("#mt-progress-length").css({"width": "0%", "opacity": "0"});
                    }, 500);
                }
            }
        }

    </script>
</body>
</html>